var canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight

var ctx = canvas.getContext('2d')

var fSize = 24
var columnCount = canvas.width / fSize

var rows = Array.from({ length: columnCount }, x => 0)
console.log(rows)
// var rows = Array.from({ length: columnCount }).map(x => 0)
// 初始化数组元素

ctx.font = fSize + 'px arial'
ctx.fillStyle = '#0F0'
ctx.fillRect(0, 0, canvas.width, canvas.height)

function draw() {
    draw.times ? draw.times++ : draw.times = 1 

    // 通过 draw.times 控制频率
    if (draw.times % 2 == 0) {
        // 通过半透明黑色，每画一次都会将原画面隐去一点
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        ctx.fillStyle = '#0F0'

        // 向下新画一行
        for (var i = 0; i < columnCount; i++) {
            var text = Math.floor(Math.random() * 10)
            ctx.fillText(text, i * fSize, rows[i] * fSize)

            if (Math.random() > 0.95) rows[i] = 0
            rows[i]++
        }
    }

    requestAnimationFrame(draw)
}

requestAnimationFrame(draw)
